import { View, Text, Picker } from "@tarojs/components";
import { AtList, AtListItem, AtButton, AtMessage } from "taro-ui";
import { useState, useEffect } from "react";
import {
  getProjectListApi,
  getPointListApi,
  getProjectUserApi,
  addDetectDataApi
} from "../../../utils/api";
import Taro, { useDidShow } from "@tarojs/taro";
import "./index.scss";

const Index = () => {
  const [project_list, set_project_list] = useState([]);
  const [project_selected, set_project_selected] = useState({});

  const [point_list, set_point_list] = useState([]);
  const [point_selected, set_point_selected] = useState({});

  const [user_list, set_user_list] = useState([]);
  const [user_selected, set_user_selected] = useState({});

  // 1-未知；2-正常；3-蚁情；4-入侵；5-低电量
  // const warn_list = [
  //   {
  //     type: 1,
  //     title: "未知"
  //   },
  //   {
  //     type: 2,
  //     title: "正常"
  //   },
  //   {
  //     type: 3,
  //     title: "蚁情"
  //   },
  //   {
  //     type: 4,
  //     title: "入侵"
  //   },
  //   {
  //     type: 5,
  //     title: "低电量"
  //   }
  // ];
  // const [warn_selected, set_warn_selected] = useState({});

  useDidShow(() => {
    getProjectList();
  });

  // 获取工程
  const getProjectList = async () => {
    const res = await getProjectListApi({
      get_count: 1000,
      start_index: 0,
      proj_keyword: ""
    });
    if (res.res === 0) {
      const arr = res.records.map(item => {
        return { project_id: item.project_id, name: item.name };
      });
      set_project_list(arr);
    } else {
      Taro.atMessage({
        message: res.msg,
        type: "warning"
      });
    }
  };

  // 更改工程
  const projectChange = e => {
    set_project_selected(project_list[e.detail.value]);
  };

  useEffect(() => {
    getPointList();
    set_point_selected({});
    getUserList();
    set_user_selected({});
  }, [project_selected]);

  // 获取工程下的布点
  const getPointList = async () => {
    const res = await getPointListApi({
      project_id: project_selected.project_id,
      get_count: 1000,
      start_index: 0
    });
    if (res.res === 0) {
      set_point_list(res.records);
    }
  };

  // 更改布点
  const pointChange = e => {
    set_point_selected(point_list[e.detail.value]);
  };

  // 获取工程下的人员
  const getUserList = async () => {
    const res = await getProjectUserApi({
      project_id: project_selected.project_id
    });
    if (res.res === 0) {
      set_user_list(res.records);
    }
  };

  // 更改分配人员
  const userChange = e => {
    set_user_selected(user_list[e.detail.value]);
  };

  // 更改报警类型
  // const warnChange = e => {
  //   set_warn_selected(warn_list[e.detail.value]);
  // };

  const onSubmit = async () => {
    const res = await addDetectDataApi({
      point_id: point_selected.point_id,
      // warn_type: warn_selected.type,
      done_timestamp: new Date().getTime(),
      target_user_id: user_selected.user_id
    });
    if (res.res === 0) {
      Taro.atMessage({
        message: "新增成功",
        type: "success"
      });
      Taro.navigateBack({
        delta: 1
      });
    }
  };

  return (
    <View className="detect-add">
      {/* 选择工程 */}
      <Picker
        mode="selector"
        range={project_list}
        onChange={projectChange}
        rangeKey="name"
      >
        <AtList>
          <AtListItem title="选择工程" extraText={project_selected.name} />
        </AtList>
      </Picker>

      {/* 选择布点 */}
      <Picker
        mode="selector"
        range={point_list}
        onChange={pointChange}
        rangeKey="name"
      >
        <AtList>
          <AtListItem title="选择布点" extraText={point_selected.name} />
        </AtList>
      </Picker>

      {/* 选择人员 */}
      <Picker
        mode="selector"
        range={user_list}
        onChange={userChange}
        rangeKey="name"
      >
        <AtList>
          <AtListItem title="选择分配人员" extraText={user_selected.name} />
        </AtList>
      </Picker>

      {/* 报警类型 */}
      {/* <Picker
        mode="selector"
        range={warn_list}
        onChange={warnChange}
        rangeKey="title"
      >
        <AtList>
          <AtListItem title="选择报警类型" extraText={warn_selected.title} />
        </AtList>
      </Picker> */}

      <AtButton type="primary" onClick={onSubmit}>
        提交
      </AtButton>
      <AtMessage />
    </View>
  );
};

export default Index;
